<template>
  <div class="myTest">
    <My-File-Choose mode="file" title="附件" @change="fileChange" />
    <My-File-Choose mode="pic" title="图片" @change="fileChange" />
    <My-Select
      title="下拉款"
      :data-list="selectData"
      @open="sclectOpen"
    />
    <My-Input v-model="inputValue" title="7月22日任务单" />
    <My-Positon class="item" title="地理位置" />

    <MyScrollSelect :shownum="2" class="item" title="选择日期11" />
    <My-Radio-Box :option-view="{}" class="item" title="选择日期11" />

    <picker class="item" mode="date" :start="startDate" :end="endDate" :value="date">
      <view class="uni-input">{{ date }}日期选择器</view>
    </picker>

    <My-Time-Picker v-model="date" mode="date" class="item" />
    <My-Timer-Range v-model="date" split="至" mode-type="date" />

  </div>
</template>

<script>
import MyInput from 'common/formComponent/MyInput';
import MySelect from 'common/formComponent/MySelect';
import MyPositon from 'common/formComponent/MyPositon';
import MyScrollSelect from 'common/formComponent/MyScrollSelect';
import MyRadioBox from 'common/formComponent/MyRadioBox';
import MyTimePicker from 'common/formComponent/MyTimePicker';
import MyTimerRange from 'common/formComponent/MyTimerRange';
import MyFileChoose from 'common/formComponent/MyFileChoose';

export default {
  components: {
    MyTimerRange,
    MyTimePicker,
    MyInput,
    MyPositon,
    MyScrollSelect,
    MyRadioBox,
    MySelect,
    MyFileChoose
  },

  data() {
    return {
      inputValue: 'cqc',
      timerPicker: '',
      date: '',
      selectData: []
    };
  },

  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },

  methods: {
    fileChange(data) {
      console.log(data);
    },

    sclectOpen() {
      setTimeout(() => {
        this.selectData = [
          {
            id: 111,
            name: '西城区',
            children: [{
              id: 1111,
              name: '南河沿大街',
              children: [],
              checked: true
            }]
          },
          {
            id: 112,
            name: '东城区',
            jk: 'ccc'
          }
        ];
      }, 1000);
    },

    confirm(e) {
      console.log(e);
    },

    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    }
  }

};
</script>

<style lang="scss" scoped>
.myTest {
  .item {
    margin-top: 10px;
  }
}
</style>
